<template>
  <div class="calendarbox">
    <div>
      <img src="@/assets/place/bg.png" alt="" />
      <div class="calendar">
        <div class="calendar-body">
          <div class="calendar-week-header">
            <div class="dayse" v-for="day in weekDays" :key="day">
              {{ day }}
            </div>
          </div>
          <div
            class="calendar-week"
            v-for="(week, index) in currentMonth.weeks"
            :key="index"
          >
            <div
              v-for="day in week"
              :key="day.date"
              :class="[
                'calendar-day',
                { today: isToday(day.date), 'other-month': day.otherMonth },
              ]"
            >
              <div>{{ formatDate(day.date.getDate()) }}</div>
              <div>{{ getLunarDate(day.date) }}</div>
            </div>
          </div>
        </div>
        <div class="calendar-header">
          <div @click="prevMonth">
            <img src="@/assets/place/top.png" alt="" />
          </div>
          <span>{{ currentMonthFormatMonth }}</span>
          <div @click="nextMonth">
            <img src="@/assets/place/bottom.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="rightbox" v-if="!postcardImage">
      <div class="topbox">
        <div class="nams">
          <div class="imgbox">
            <img src="@/assets/test/cai.png" alt="" />
            <div class="info">
              <div>行动交给现在，结果交给我时间</div>
              <div>追光的人终会光芒万丈</div>
            </div>
            <div class="sign">————by 量城游</div>
          </div>
          <div class="timebox">
            <div class="imgsbox">
              <img src="@/assets/place/ma.jpg" alt="" />
              <div class="phon">400-800-1713</div>
            </div>
            <div class="mabox">
              <div class="timesbox">
                <div>{{ currentMonth.year }}年{{ currentMonth.month + 1 }}月</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="postcard_box_wrap" v-else>
      <div class="postcard_box">
        <img :src="apiUrl + postcardImage" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { getLunar } from "chinese-lunar-calendar";
import { getPostcardLastone } from "@/api/serch/index";
const apiUrl = process.env.VUE_APP_API_URL;


const postcardImage = ref("");

const weekDays = ref(["日", "一", "二", "三", "四", "五", "六"]);
const times=ref()
const getMonth = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth();
  const firstDayOfMonth = new Date(year, month, 1).getDay();
  const lastDateOfMonth = new Date(year, month + 1, 0).getDate();

  const days = [];
  for (let i = 0; i < firstDayOfMonth; i++) {
    days.push({ date: new Date(year, month, 0 - i), otherMonth: true });
  }
  for (let i = 1; i <= lastDateOfMonth; i++) {
    days.push({ date: new Date(year, month, i) });
  }

  const weeks = [];
  while (days.length) {
    weeks.push(days.splice(0, 7));
  }

  return { year, month, weeks };
};
const currentMonth = ref( getMonth(new Date()) );
const prevMonth = () => {
  currentMonth.value = getMonth(
    new Date(currentMonth.value.year, currentMonth.value.month - 1)
  );
};

const nextMonth = () => {
  currentMonth.value = getMonth(
    new Date(currentMonth.value.year, currentMonth.value.month + 1)
  );
};

const isToday = (date) => {
  const today = new Date();
  return date.toDateString() === today.toDateString();
};

const formatDate = (date) => {
  return date < 10 ? "0" + date : date;
};

const currentMonthFormatMonth = computed(() => {
  const monthMap = [
    "壹月",
    "貳月",
    "叁月",
    "肆月",
    "伍月",
    "陸月",
    "柒月",
    "捌月",
    "玖月",
    "拾月",
    "拾壹月",
    "拾貳月",
  ];
  return monthMap[currentMonth.value.month];
});

const getLunarDate = (date) => {
  const lunarDate = getLunar(
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate()
  );
  let parts =lunarDate.dateStr.split("月")
  let result =lunarDate.lunarDate === 30 ? '三十' : parts[parts.length - 1]
  return result;
};
// 获取海报图片
function getPostcardImage() {
  getPostcardLastone().then((response) => {
    if (response.data.code === 200) {
      const { picture = '' } = response.data.data || {};
      postcardImage.value = picture;
    }
  })
}
getPostcardImage();
</script>
<style lang="scss" scoped>
.calendarbox {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 1200px;
  .rightbox {
    width: 555px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.16);
    .topbox {
      padding: 35px 25px 0 35px;
      .nams {
        display: flex;
        justify-content: space-between;
        .imgbox {
          display: flex;
          flex-direction: column;
          gap: 40px;
          width: 410px;
          height: 475px;
          img {
            width: 410px;
            height: 475px;
          }
          .info {
            margin-left: 30px;
          }
          .sign {
            display: flex;
            justify-content: end;
          }
        }
        .timebox {
          display: flex;
          flex-direction: column;
          gap: 250px;
          align-items: center;
          .imgsbox {
            width: 66px;
            height: 66px;
            text-align: right;
            .phon {
              font-size: 12px;
              text-align: left;
              transform: scale(0.75, 0.75);
              transform-origin: 50% 50%;
              white-space: pre;
            }
            img {
              width: 56px;
              height: 56px;
            }
          }
        }
        .mabox {
          writing-mode: vertical-rl;
          text-orientation: upright;
          letter-spacing: 15px;
          .timesbox {
            width: 65px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
        }
      }
    }
  }
  .postcard_box_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .postcard_box {
    width: 555px;
    padding: 2px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.16);
    img {
      width: 100%;
      border-radius: 2px;
      display: block;
    }
  }
}
.calendar {
  display: flex;
  width: 550px;
  border-radius: 5px;
  overflow: hidden;
}

.calendar-header {
  font-size: 40px;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  img {
    width: 30px;
    height: 30px;
  }
  span {
    letter-spacing: 40px;
    color: #566441;
  }
}

.calendar-body {
  width: 85%;
  display: flex;
  flex-direction: column;
}

.calendar-week-header {
  display: flex;
  justify-content: space-around;
  .dayse {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background-image: url("@/assets/place/quan.png");
    background-size: 100% 100%;
  }
}

.calendar-week {
  display: flex;
  margin-top: 10px;
}

.calendar-day {
  width: 14.28%; /* 100% / 7 days */
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  color: black; /* 默认文字颜色为黑色 */
}

.today {
 
  background-image: url("@/assets/place/redbg.png");
  background-size: 105% 110%;
  color: white; /* 选中日期的文字颜色为白色 */
}

.other-month {
  color: #ccc;
}
</style>